<template>
	<view class="add-recipe-container">
		<view class="header">
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">添加食谱</view>
			<view class="save-btn" @tap="saveRecipe">
				保存
			</view>
		</view>
		
		<view class="form-container">
			<view class="form-item">
				<view class="form-label">
					<text class="required">*</text>食谱名称
				</view>
				<input 
					type="text" 
					v-model="recipeForm.title" 
					placeholder="请输入食谱名称"
					class="form-input"
				/>
			</view>
			
			<view class="form-item">
				<view class="form-label">食谱描述</view>
				<textarea 
					v-model="recipeForm.description" 
					placeholder="请输入食谱描述"
					class="form-textarea"
				/>
			</view>
			
			<view class="form-item">
				<view class="form-label">食谱图片</view>
				<input 
					type="text" 
					v-model="recipeForm.image" 
					placeholder="请输入图片URL"
					class="form-input"
				/>
			</view>
			
			<view class="form-item">
				<view class="form-label">餐次类型</view>
				<picker 
					mode="selector" 
					:range="mealTypeOptions" 
					range-key="label"
					:value="mealTypeIndex"
					@change="handleMealTypeChange"
					class="form-picker"
				>
					<view class="picker-text">
						{{ mealTypeOptions[mealTypeIndex].label }}
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<view class="form-label">烹饪贴士</view>
				<textarea 
					v-model="recipeForm.tips" 
					placeholder="请输入烹饪贴士"
					class="form-textarea"
				/>
			</view>
			
			<!-- 食材部分 -->
			<view class="foods-section">
				<view class="section-header">
					<view class="section-title">食材列表</view>
					<view class="add-btn" @tap="addFood">添加食材</view>
				</view>
				
				<view class="foods-list">
					<view class="food-item" v-for="(food, index) in recipeForm.foods" :key="index">
						<view class="food-name">
							<input 
								type="text" 
								v-model="food.foodName" 
								placeholder="食材名称"
								class="form-input"
							/>
						</view>
						<view class="food-quantity">
							<input 
								type="number" 
								v-model="food.quantity" 
								placeholder="数量"
								class="form-input"
							/>
						</view>
						<view class="food-unit">
							<input 
								type="text" 
								v-model="food.unit" 
								placeholder="单位"
								class="form-input"
							/>
						</view>
						<view class="delete-btn" @tap="removeFood(index)">
							<text class="iconfont icon-delete"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { addRecipe } from '@/common/api/diet.js'
	
	// 餐次类型选项
	const mealTypeOptions = [
		{ value: 'breakfast', label: '早餐' },
		{ value: 'lunch', label: '午餐' },
		{ value: 'dinner', label: '晚餐' },
		{ value: 'snack', label: '小食' }
	]
	const mealTypeIndex = ref(0) // 默认选中早餐
	
	// 食谱表单数据
	const recipeForm = reactive({
		title: '',
		description: '',
		image: '',
		mealType: mealTypeOptions[0].value,
		tips: '',
		foods: [
			{ foodId: 1, foodName: '煮鸡蛋', quantity: 100, unit: 'g' }
		]
	})
	
	// 处理餐次类型变化
	const handleMealTypeChange = (e) => {
		const index = e.detail.value
		mealTypeIndex.value = index
		recipeForm.mealType = mealTypeOptions[index].value
	}
	
	// 添加食材
	const addFood = () => {
		recipeForm.foods.push({ foodId: 1, foodName: '煮鸡蛋', quantity: 100, unit: 'g' })
	}
	
	// 移除食材
	const removeFood = (index) => {
		if (recipeForm.foods.length > 1) {
			recipeForm.foods.splice(index, 1)
		} else {
			uni.showToast({
				title: '至少需要一种食材',
				icon: 'none'
			})
		}
	}
	
	// 保存食谱
	const saveRecipe = async () => {
		// 表单验证
		if (!recipeForm.title || recipeForm.title.trim() === '') {
			uni.showToast({
				title: '请输入食谱名称',
				icon: 'none'
			})
			return
		}
		
		if (recipeForm.foods.some(food => !food.foodName || food.foodName.trim() === '')) {
			uni.showToast({
				title: '请填写所有食材名称',
				icon: 'none'
			})
			return
		}
		
		try {
			uni.showLoading({
				title: '保存中...'
			})
			
			// 确保每个食材都有id，如果没有则使用1表示煮鸡蛋
			const formattedFoods = recipeForm.foods.map(food => {
				// 确保foodId是数字类型
				const foodId = parseInt(food.foodId) || 1
				
				return {
					foodId: foodId,
					quantity: parseFloat(food.quantity) || 100,
					unit: food.unit || 'g'
				}
			})
			
			// 添加一些步骤示例
			const steps = [
				{ content: '准备所有食材', stepOrder: 1 },
				{ content: '按照个人口味调味', stepOrder: 2 },
				{ content: '烹饪完成后装盘', stepOrder: 3 }
			]
			
			const data = {
				...recipeForm,
				foods: formattedFoods,
				steps: steps
			}
			
			console.log('提交食谱数据:', JSON.stringify(data))
			
			const res = await addRecipe(data)
			
			if (res.code === 0) {
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
				
				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				uni.showToast({
					title: res.msg || '添加失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('添加食谱失败:', e)
			uni.showToast({
				title: '添加失败: ' + (e.message || '未知错误'),
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.add-recipe-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 100;
			
			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-back {
					font-size: 36rpx;
					color: #333;
				}
			}
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.save-btn {
				padding: 10rpx 20rpx;
				background-color: #8cc9a1;
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
		}
		
		.form-container {
			padding: 20rpx;
			
			.form-item {
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;
				
				.form-label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					
					.required {
						color: #ff6b6b;
						margin-right: 5rpx;
					}
				}
				
				.form-input {
					width: 100%;
					height: 80rpx;
					font-size: 28rpx;
					color: #333;
					background-color: #f7f7f7;
					border-radius: 8rpx;
					padding: 0 20rpx;
				}
				
				.form-textarea {
					width: 100%;
					height: 160rpx;
					font-size: 28rpx;
					color: #333;
					background-color: #f7f7f7;
					border-radius: 8rpx;
					padding: 20rpx;
				}
				
				.form-picker {
					width: 100%;
					height: 80rpx;
					
					.picker-text {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #333;
						background-color: #f7f7f7;
						border-radius: 8rpx;
						padding: 0 20rpx;
					}
				}
			}
			
			.foods-section {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				
				.section-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.section-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}
					
					.add-btn {
						padding: 8rpx 20rpx;
						background-color: #8cc9a1;
						color: #fff;
						font-size: 24rpx;
						border-radius: 30rpx;
					}
				}
				
				.foods-list {
					.food-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						
						.food-name {
							flex: 2;
							margin-right: 10rpx;
						}
						
						.food-quantity {
							flex: 1;
							margin-right: 10rpx;
						}
						
						.food-unit {
							flex: 1;
							margin-right: 10rpx;
						}
						
						.delete-btn {
							width: 60rpx;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
							.icon-delete {
								font-size: 32rpx;
								color: #ff6b6b;
							}
						}
					}
				}
			}
		}
	}
</style> 